<template>
  <div>
    	<div class="bg">
    		<img src="../assets/loginbg.png"/>
    	</div>
    	<!--头部-->
		<header id="header">
			<div class="header clearfix">
				<div class="header_left pull-left">
					<i class="iconfont baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
			</div>
		</header>
    	<!--==-->
    	<div class="input">
	      <div class="input_main">
	    		<div class="input_input">
	    			<h4 class="input_each">
	    				<span class="iconfont baiColor">&#xe652;</span>
	    				<input type="number" ref="phone"  value="" placeholder="输入您的手机号" />
	    				<em class="gain baiColor" @click="getCode" v-if="gainOriginal" v-text="gain"></em>
	    				<em class="gain baiColor" v-if="gainNow">{{countDown}}s后重试</em>
	    			</h4>
	    			<h4 class="input_each">
	    				<span class="iconfont baiColor">&#xe61d;</span>
	    				<input type="text" ref="veri" value="" placeholder="输入验证码"/>
	    			</h4>
	    			<h4 class="input_each">
	    				<span class="iconfont baiColor">&#xe64f;</span>
	    				<input type="password" ref="pw" value="" placeholder="密码"/>
	    			</h4>
	    			<h4 class="input_each">
	    				<span class="iconfont baiColor">&#xe66c;</span>
	    				<input type="number" maxlength="6" ref="yqm" value="" placeholder="添加邀请码（选填）"/>
	    			</h4>
	    		</div>
	    		<div class="input_button button _width baiColor" @click="reg">
	    			<p>注册</p>
	    		</div>
	    	</div>
	    	<div style="display: none;">
	    		<!--=用户邀请码=-->
	    		{{code}}
	    	</div>
    	</div>
  </div>
</template>

<script>
export default {
	data () {
	    return {
	    	gain:"获取验证码",
	    	gainOriginal:true,
	    	gainNow:false,
	    	countDown:"60",
	    	num:60,
	    	code:""	//用户邀请码，只有通过
	    }
	},
	mounted(){
			this.$refs.phone.focus();	//获取焦点
			//获取邀请码部分
			var str=window.location.href;
			var num=str.lastIndexOf("/")+1;
			var id = str.substring(num);
			this.code = id;		//【id后期需调整为邀请链接】
			console.log(id)	//
		},
		
  methods:{
		//			获取验证码
		getCode:function(){
			var _this = this;
			var testPhone = new RegExp(/^1((3[0-9]{1})|(45)|(47)|(5[0-9]{1})|(76)|(77)|(78)|(8[0-9]{1}))\d{8}$/);
			var phone = _this.$refs.phone.value;
			if(phone == ""){
				alert("请输入您的手机号")
			}else if(testPhone.test(phone) == false){
				alert("手机号输入有误");
			}else{
				let params = new URLSearchParams();
				params.append('phone',phone);
				params.append('type',1);
				this.$axios({
					url:"One/Register/sendMsm",
					method:"post",
					data:params
				}).then(function(res){
					if(res.data.status == 0){
						alert("发送失败")
					}else if(res.data.status == 1){
						//成功后倒计时
						_this.gainOriginal = false;
						_this.gainNow = true;
						var countDown = _this.countDown;
						//				倒计时
						var num=_this.num;
						var timer=setInterval(function(){
							if(num >= 1){
								--num;
								_this.countDown = num
							}else{
									_this.gainOriginal = true;
									_this.gainNow = false;
									_this.countDown = _this.num;
									clearInterval(timer);
								}
						},1000);
						//倒计时结束
					}else if(res.data.status == 3){
						alert("此手机号已被注册")
					}	
					}).catch(function(err){
						console.log(err)
					});
			}
		},
  //注册
  	reg(){
  		let _this = this;
			let phone = _this.$refs.phone.value;	//手机号
			let veri = _this. $refs.veri.value;	//验证码
			let pw = _this.$refs.pw.value;		//密码
			let	yqm = _this.$refs.yqm.value;	//邀请码
		//		验证邀请码
		var testyqm = new RegExp(/^00\d{4}$/);
		if(phone == "" || pw == ""  || yqm == ""){
			alert("请完善您的信息");
		}else if(testyqm.test(yqm) == false){
			alert("邀请码输入错误请重新输入")
			this.$refs.yqm.value = ""
		}else{
			var params = new URLSearchParams();
			params.append('phone',phone);
			params.append('vcode',veri);
			params.append('pwd',pw);
			params.append('invite',yqm);
			_this.$axios({
			  url:"One/Register/index",
				method:"post",
				data:params
				}).then(function(res){
				  if(res.data.status == 0){
				   	alert("注册失败，请重新注册")
				   	_this.$refs.phone.value = "";
				   	_this.$refs.pw.value = "";
				   	_this. $refs.veri.value = "";
				  }else if(res.data.status == 1){
						alert("注册成功")
						_this.$refs.phone.value = "";
				   	_this.$refs.pw.value = "";
				   	_this. $refs.veri.value = "";
				   	_this.$router.push("wlogin");
				   }else if(res.data.status == 2){
				 		console.log(res)
				   }else if(res.data.status == 3){
				   	alert("此账号已被注册")
				  }else if(res.data.status == 4){
				   	alert("验证码输入错误，请重新输入")
				   	_this. $refs.veri.value = "";
				  }
				}).catch(function(err){
					console.log(err)		
				})
				
			}
		},
	//结束
 	}
}
</script>

<style scoped>
	@import "../css/public.css";
	@import "../css/login.css";
	/*头部*/
	.header .header_left i{
		font-size: 20px;
	}
	/*=获取验证码=*/
	.gain{
		display: inline-block;
		font-size:12px;
		background:#F3961F;
		height: 25px;
		line-height: 25px;
		width: 90px;
		text-align: center;
		border-radius: 5px;
	}
	input::-webkit-input-placeholder { /* WebKit browsers */ 
		color: #fff;
	}
	input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
	color: #fff;
	} 
	input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
	color: #fff;
	} 
	input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
	color: #fff;
	}
	.input_button{
		margin: 20px 0;
	}
</style>
